<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery UI实现可改变大小层-柯乐义</title>
    <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js"></script>
    <link rel="stylesheet" href="http://keleyi.com/keleyi/pmedia/jquery/ui/1.10.2/themes/smoothness/jquery-ui-1.10.2.custom.min.css" />
    <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/ui/1.10.2/jquery-ui.js"></script>
    <style type="text/css">
        #resizable_keleyi_com { width: 150px; height: 150px; padding: 4px; }
        #resizable_keleyi_com h3 { text-align: center; margin: 0;font-size:12px; }
    </style>
</head>
<body>

<div id="resizable_keleyi_com" class="ui-widget-content">
    <h3 class="ui-widget-header">可改变大小层</h3>
    这里是内容<br />
    www.keleyi.com
</div>
<script type="text/javascript">
    $(function () {
        $("#resizable_keleyi_com").resizable({minWidth:100,minHeight:50});
    });
</script>
<br />
移动光标，当光标变成双箭头，按住鼠标拖动则可以改变层的大小。<br />
<a href="http://keleyi.com/a/bjac/7e8897e5ec0849e9.htm" target="_blank">原文</a>
</body>
</html>